<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1"
			        style="margin-right:10px;">
				<p class="queryLabel">角色名称:</p>
			</el-col>
			<el-col :span="4">
				<el-input size="small"
				          v-model="dataRoleValue"
				          placeholder="请输入"
				          style="width:120!important"></el-input>
	
			</el-col>
			<el-col :span="1">
				<el-button type="primary"
				           size="small"
				           v-on:click='resRoleQuery'>查询</el-button>
			</el-col>
			<el-col :span="18"
			        style="text-align: right;margin-left:-10px;">
				<el-button type="primary"
				           size="small"
				           v-on:click='resRoleAdd'>新增</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="resRoleEdit()">编辑</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="startResRole()">启用</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="stopResRole()">停用</el-button>
				<el-button type="primary"
				           size="small"
				           @click.native.prevent="editData()">权限分配</el-button>
	
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList"
				          stripe
				          border
				          @selection-change="handleSelectionChange"
				          style="width: 100%">
					<el-table-column type="selection"
					                 width="60"
					                 fixed>
					</el-table-column>
	
					<!--
			                                	作者：1813180149@qq.com
			                                	时间：2017-02-06
			                                	描述：
			                                	<el-table-column prop="id" label="序号">
			                					</el-table-column>-->
					<el-table-column prop="roleName"
					                 label="角色名称">
					</el-table-column>
					<el-table-column prop="roleType"
					                 label="角色类型"
					                 :formatter="roleTypeCov"
					                 width="300">
					</el-table-column>
					<el-table-column prop="status"
					                 label="状态"
					                 :formatter="statusCov"
					                 width="300">
					</el-table-column>
					<!--<el-table-column label="操作" width="260" fixed='right'>
									<template scope="scope">
										<el-tooltip class="item" effect="light" content="编辑" placement="top">
											<el-button type="primary" size="mini" class="iconfont icon-dingdan" @click.native.prevent="resRoleEdit(scope.$index)"></el-button>
										</el-tooltip>
										<el-tooltip class="item" effect="light" content="启用" placement="top">
											<el-button type="info" size="mini" class="iconfont icon-kaishi" @click.native.prevent="startResRole(scope.$index)"></el-button>
										</el-tooltip>
										<el-tooltip class="item" effect="light" content="停用" placement="top">
											<el-button type="warning" size="mini" class="iconfont icon-stop" @click.native.prevent="stopResRole(scope.$index)"></el-button>
										</el-tooltip>
										<el-tooltip class="item" effect="light" content="分配权限" placement="top">
											<el-button type="danger" size="mini" class="iconfont icon-bianji" @click.native.prevent="editData(scope.$index)"></el-button>
										</el-tooltip>
									</template>
								</el-table-column>-->
				</el-table>
				<el-pagination small
				               @size-change="handleSizeChange"
				               @current-change="handleCurrentChange"
				               :current-page="CurentPage"
				               :page-sizes="page.pageSizes"
				               :page-size="page.pageSize"
				               layout=" total,prev, pager, next"
				               :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<!--
			                        	作者：王恒腾
			                        	时间：2017-02-06
			                        	描述：新增与编辑界面↓↓↓
			                        -->
		<el-dialog title="数据角色信息"
		           v-model="dataRoleFormShow">
			<el-form :model="dataRoleFormData"
			         ref="dataRoleForm"
			         :rules="roleRule"
			         label-width="100px">
				<el-form-item label="角色名称:"
				              prop="roleName"
				              required>
					<el-input size="small"
					          v-model="dataRoleFormData.roleName"></el-input>
				</el-form-item>
				<el-form-item label="角色类型:"
				              prop="roleType">
					<el-select size="small"
					           v-model="dataRoleFormData.roleType"
					           placeholder="角色类型"
					           :disabled="noEdit">
						<el-option label="部门权限"
						           value="0"
						           selected>
						</el-option>
						<el-option label="人员权限"
						           value="1"
						           selected>
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="dataRoleFormShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveDataRole">提 交</el-button>
			</div>
		</el-dialog>
		<!-- 弹出权限选择树-->
		<el-dialog title="分配权限"
		           v-model="treeShow"
		           size="small">
			<el-tree :data="treeData"
			         ref="orgTree"
			         show-checkbox
			         :filter-node-method="filterNode"
			         node-key="id"
			         :highlight-current=true
			         
			         :props="treepros"
			         accordion
			         :default-checked-keys="checkedKeys"></el-tree>
			<div slot="footer"
			     class="dialog-footer">
				<el-button @click="treeShow = false">取 消</el-button>
				<el-button type="primary"
				           @click="saveTree">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data: function () {
		return {
			//页码数
			CurentPage: 1,
			//每页的数量
			page: this.page,
			//列表查询条件
			dataRoleValue: '',
			//分组数据
			tableData: {
				total: 0,
				dataList: []
			},
			//创建编辑表单
			dataRoleFormShow: false,
			//表单初始值
			emptyData: {
				id: '',
				roleName: '',
				roleType: '',
				updateTime: 0,
				status: '1',
				updateUser: '',
				createTime: 0,
				createUser: ''
			},
			//表单数据
			dataRoleFormData: {
				id: '',
				roleName: '',
				roleType: '',
				status: '1',
				updateTime: 0,
				updateUser: '',
				createTime: 0,
				createUser: ''
			},
			//校验规则
			roleRule: {
				roleName: [{
					required: true,
					message: '请输入角色名称',
					trigger: 'blur'
				}],
				roleType: [{
					required: true,
					message: '请选择角色类型',
					trigger: 'change'
				}],
			},
			//树形图相关
			regions: [],
			/*************组织机构树**************/
			// 左侧树形菜单
			treeData: [],
			// 树选中高亮
			treepros: {
				label: 'oName',
				children: 'child'
			},
			treeShow: false,
			//选中的节点
			checkedKeys: [],

			/***类型一但指定不可编辑**/
			noEdit: false,
			//定义空数组，来判断 单选 选中哪一个
			multipleSelection: [],
			/*********分配权限*************/
			currentRoleId: '',
			currentRoleType: ''

		}
	},

	methods: {
		/*------------------树形图相关方法↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓----------------------------------------------*/
		//复选框选中的方法
		handleCheckChange(data, checked, indeterminate) {
			//debugger;
			console.log(data, checked, indeterminate);
		},
		handleNodeClick(data) {
			//				this.$data.checkdata=getCheckedNodess(true);
			console.log(data);
		},
		//复选框回调函数
		handleSelectionChange: function (val) {
			debugger;
			this.$data.multipleSelection = val;
		},
		reminderDelte: function () {
			debugger;
			if (this.$data.multipleSelection.length == 1) {
				this.openRemind(this.$data.multipleSelection[0].id)
			} else {
				this.$message.error("请选择一条数据")
			}
		},

		//加载组织机构树形图
		queryOrgTree: function (type) {
			debugger;
			// 加载树
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/dept/orgTree',
				params: {
					type: type
				}
			}).then(function (resp) {
				this.$data.treeData = resp.data.dataList;
			}, function (error) {
				// error
			})
		},
		queryCheckedKeys: function (id, type) {
			this.$data.checkedKeys = [];
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/dataRole/ref',
				params: {
					id: id,
					type: type
				}
			}).then(function (resp) {
				debugger;
				this.$data.checkedKeys = resp.data.dataList;
			}, function (error) {
				// error
			})
		},
		//获取已经选择的树

		/*------------------树形图相关方法↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑----------------------------------------------*/
		//查询
		resRoleQuery: function () {
			//debugger;
			this.$http({
				method: 'GET',
				url: this.API_ROOT + '/rbac/dataRole/page', //url
				params: { //发送的参数
					rolename: this.$data.dataRoleValue, //查询条件
					start: this.$data.CurentPage, //页码
					limit: this.$data.page.pageSize //每页的数量
				}
			}).then(function (resp) {
				//debugger;
				resp.data.total = parseInt(resp.data.total);
				// es5写法
				this.$data.tableData = resp.data;

			}, function (error) {
				// error
			})
		},
		//列表，分页大小切换
		handleSizeChange: function () { },
		//列表,当前页切换
		handleCurrentChange: function (currentPage) {
			this.$data.CurentPage = currentPage;
			//this.$data.dictGroup = '';
			this.resRoleQuery();
		},
		//新增资源角色
		resRoleAdd: function () {
			this.$data.noEdit = false;
			//清空数据
			this.$data.dataRoleFormData = Object.assign(this.$data.dataRoleFormData, this.$data.emptyData);
			this.$data.dataRoleFormShow = true;
		},
		//编辑角色
		resRoleEdit: function () {
			debugger
			if (this.$data.multipleSelection.length == 1) {
				//获取角色
				var resRoleData = this.$data.multipleSelection[0].id;
				this.$http.get(this.API_ROOT + '/rbac/dataRole/info', {
					params: {
						id: resRoleData
					}
				}).then((response) => {
					this.$data.noEdit = true;
					// success callback
					this.$data.dataRoleFormData = Object.assign(this.$data.dataRoleFormData, response.data.data);
				}, (response) => {
					// error callback
				});
				this.$data.dataRoleFormShow = true;
			} else {
				this.$message.error("请选择一条数据")
			}

		},
		//启用角色
		startResRole: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/rbac/dataRole/start',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.resRoleQuery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}


		},
		//停用角色
		stopResRole: function () {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0].id;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/rbac/dataRole/stop',
					params: {
						id: data,
					}
				}).then(function (resp) {
					this.$message(resp.data.msg);
					this.resRoleQuery();
				}, function (error) {
					// error
				})
			} else {
				this.$message.error("请选择一条数据")
			}


		},

		filterNode: function (value, data, node) {
			if (!value) return true;
			return data.oName.indexOf(value) !== -1;
		},
		//保存角色
		saveDataRole: function () {
			this.$refs.dataRoleForm.validate(function (valid) {
				if (valid) {
					this.$http.post(this.API_ROOT + '/rbac/dataRole/save', this.$data.dataRoleFormData)
						.then(resp => {
							if (resp.data.success) {
								this.$message(resp.data.msg);
								this.resRoleQuery();
								this.$data.dataRoleFormShow = false;
							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
				return false;
			}.bind(this));
		},
		/*********权限分配相关*******/
		editData: function (index) {
			if (this.$data.multipleSelection.length == 1) {
				var data = this.$data.multipleSelection[0];
				this.$data.currentRoleId = data.id;
				this.$data.currentRoleType = data.roleType;
				this.$data.checkedKeys = [];
				this.queryOrgTree(data.roleType);
				this.queryCheckedKeys(data.id, data.roleType);
				this.$data.treeShow = true;
			} else {
				this.$message.error("请选择一条数据")
			}



		},
		saveTree: function () {
			var checkNodes = this.$refs.orgTree.getCheckedNodes();
			var data = {
				data: JSON.stringify(checkNodes),
			}
			this.$http({
				method: 'POST',
				url: this.API_ROOT + '/rbac/dataRole/saveRef',
				body: checkNodes,
				params: {
					id: this.$data.currentRoleId,
					type: this.$data.currentRoleType
				}
			}).then(function (resp) {
				this.$message(resp.data.msg);
				if (resp.data.success) {
					this.$data.treeShow = false;
				}
			}, function (error) {
				// error
			})
		},
		//状态转换
		statusCov: function (row, column) {
			return row.status == "1" ? '已启用' : '已停用';
		},
		roleTypeCov: function (row, column) {
			return row.roleType == "0" ? '部门权限' : '人员权限';
		},
	},
	//表单创建时执行
	created: function () {
		//列表查询
		this.resRoleQuery();

	}
}
</script>
<style>
.el-table .info-row {
	height: 15px !important;
}

.item {
	width: 30px;
}

.el-dropdown .el-button-group,
.el-table .el-tooltip,
.el-table .el-tooltip__rel {
	display: inline;
}
</style>